<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <script src="../assets/flexible/flexible.debug.js"></script>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>紫砂壶</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/purple.css">
    <link rel="stylesheet" href="../assets/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="../assets/font/iconfont.css">
</head>

<body>

    <header class="header">
        <div class="iconfont left index">&#xe607;返回</div>
        <div class="center">紫砂壶</div>
        <div class="right"></div>
    </header>
    <div class="swiper-container container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../images/47.jpg"></div>
            <div class="swiper-slide"><img src="../images/48.jpg"></div>
            <div class="swiper-slide"><img src="../images/49.jpg"></div>
            <div class="swiper-slide"><img src="../images/50.jpg"></div>
            <div class="swiper-slide"><img src="../images/51.jpg"></div>
            <div class="swiper-slide"><img src="../images/52.jpg"></div>
            <div class="swiper-slide"><img src="../images/53.jpg"></div>
            <div class="swiper-slide"><img src="../images/54.jpg"></div>
        </div>
        <div class="hui">
            回首页
            <i class="iconfont">&#xe67f;</i>
        </div>
    </div>
    <div class="menu">
        <p class="column">紫砂壶 工艺美术大师金奖杨水定之作 扁平壶 135ml 手工壶</p>
        <p class="summary">醉品价<span>￥430.00</span></p>
    </div>
    <div class="status">
        <dl>
            <dt>促销</dt>
            <dd><span>直降</span>已优惠￥90(8.3折)</dd><br>
            <dd><span>包邮</span>全场在线支付满59元免运费</dd>
        </dl>
    </div>
    <div class="service">
        <dl>
            <dt>服务</dt>
            <dd><span>全场商品90天包价</span><span class="span">30天无忧退换货</span></dd><br>
            <dd><span>满59元免运费</span><span class="span">2000城市货到付款</span></dd>
        </dl>
    </div>
    <div class="msg">
        <dl>
            <dt>数量</dt>
            <dd>
                <p>
                    <span class="left">-</span>
                    <span class="center">1</span>
                    <span class="right">+</span>
                </p>
            </dd>
        </dl>
    </div>
    <nav class="nav">
        <div class="list on">详情</div>
        <div class="list center">规格</div>
        <div class="list">评论</div>
    </nav>
    <div class="swiper-container container1">
        <div class="swiper-wrapper">
            <div class="swiper-slide slide">
                <img src="../images/55.jpg">
                <img src="../images/56.jpg">
                <img src="../images/57.jpg">
                <img src="../images/58.jpg">
                <img src="../images/59.jpg">
                <img src="../images/60.jpg">
                <img src="../images/61.jpg">
                <img src="../images/62.jpg">
                <img src="../images/63.jpg">
                <img src="../images/64.jpg">
                <img src="../images/65.jpg">
                <img src="../images/66.jpg">
                <img src="../images/67.jpg">
                <img src="../images/68.jpg">
                <img src="../images/69.jpg">
                <img src="../images/70.jpg">
                <img src="../images/71.jpg">
            </div>
            <div class="swiper-slide slide1">
                <div class="shang">商品编号<span>8699439</span></div>
            </div>
            <div class="swiper-slide slide2">
                <div class="ping">评论（0）<span>好评度<span>100%</span></span>
                </div>
            </div>
        </div>
    </div>
    <footer class="footer">
        <div class="iconfont left">&#xe501;</div>
        <div class="center">立即购买</div>
        <div class="right">加入购物车</div>
    </footer>

    <script src="../assets/jquery/jquery-3.2.1.min.js"></script>
    <script src="../js/index.js"></script>
    <script src="../assets/swiper/js/swiper.min.js"></script>
    <script src="../assets/artTemplate/template-web.js"></script>
    <script>
        $(function () {
            $(".index").click(function () {
                location.href = "../index.html"
            })
            $(".hui").click(function () {
                location.href = "../index.html"
            })
            $(".footer").click(function () {
                location.href = "../html/cart.html"
            })
            var swiper = new Swiper('.container', {
                paginationClickable: true
            });
            var mySwiper = new Swiper('.container1', {
                autoHeight: true,
                onTransitionEnd: function (swiper) {
                    $('.list').eq(mySwiper.activeIndex).addClass('on').siblings().removeClass('on');
                }
            })
            $('.list').click(function () {
                $(this).addClass('on').siblings().removeClass('on');
                mySwiper.slideTo($(this).index(), 1000);
            });
        })
    </script>
</body>

</html>